{% extends 'admin/change_form.html' %}

{% load suit_forms admin_static i18n %}

{% block extrastyle %}
    {{ block.super }}
    <style type="text/css">
        .drop-area {
            margin: 50px auto;
            width: 500px;
        }

        #drop-title {
            width: 100%;
            height: 75pt;
            border: 3px dashed silver;
            color: #d3d3d3;
            text-align: center;
            font-size: 20px;
            line-height: 75pt;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "admin/js/vendor/jquery/jquery.js" %}"></script>
    <script type="text/javascript" src="{% static "admin/js/jquery.init.js" %}"></script>
{% endblock %}

{% block breadcrumbs %}
    <div class="breadcrumbs">
        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a> &rsaquo;
        {% trans "Upload" %} &rsaquo; {% trans "New Package" %}
    </div>
{% endblock %}

{% if messages %}
    <ul class="messages">
        {% for message in messages %}
            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
        {% endfor %}
    </ul>
{% endif %}

{% block content %}
    <div class="card">
        <div class="card-header">
            {% trans "Upload New Package" %}
        </div>
        <div class="card-block">
            <form style="display:none;" enctype="multipart/form-data" action="" method="post" id="upload_form"
                  novalidate>
                {% csrf_token %}
                {{ form }}
                <input type="hidden" name="action" value="upload">
                <input type="hidden" name="ajax" value="false">
                <input type="submit">
            </form>
            <div class="drop-area">
                <div id="drop-title">{% trans 'Debian Package (*.deb)' %}</div>
            </div>
            <div class="drop-list-area">
                <ul id="drop-list"></ul>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            {% trans "Import Guide" %}
        </div>
        <div class="card-block">
            {% url "upload" as upload_url %}
            <ul>
                <li>{% trans "Allowed file extensions: deb" %}</li>
                <li>{% trans "Package manager for Debian: " %}<a href="https://manpages.debian.org/stretch/dpkg/dpkg.1.en.html" target="_blank">{% trans "dpkg(1)" %}</a></li>
                <li>{% blocktrans %}If you get http code <code>413 request entity too large</code>, increase the <code>client_max_body_size</code> in <a href="https://nginx.org/en/docs/http/ngx_http_core_module.html" target="_blank">Nginx configuration</a>.{% endblocktrans %}</li>
                <li>{% blocktrans %}If you want to import all packages in <b>Upload Root</b>{% endblocktrans %}:</li>
                <li><form action="{{ upload_url }}" method="POST">{% csrf_token %}<input type="hidden" name="action" value="async-import"><input class="btn btn-large btn-warning" type="submit" value="{% trans "Import Packages" %}"></form></li>
            </ul>
        </div>
    </div>
    <script>
        (function ($) {
            var isUpload = false;
            var box = document.getElementById('drop-title');
            var finput = document.getElementById("id_package");

            function box_display(msg) {
                box.style.color = "#D3D3D3";
                box.innerText = msg;
            }

            function box_alert(msg) {
                box.style.color = "#C0392B";
                box.innerText = msg;
            }

            function job_test(job_id) {
                $.ajax({
                    url: '',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        'csrfmiddlewaretoken': '{{ csrf_token }}',
                        'action': 'upload',
                        'ajax': true,
                        'job': job_id
                    },
                    success: function (d) {
                        if (d['result'] === true) {
                            if (d['job']['is_finished'] === true) {
                                if (d['job']['result']['success'] === true) {
                                    // Success, jump to version control
                                    var version_id = d['job']['result']['version'];
                                    window.location.href = '/admin/WEIPDCRM/version/' + version_id + '/change/';
                                } else {
                                    alert("{% trans 'Exception: ' %}" + d['job']['result']['exception']);
                                    box_alert("{% trans 'An error occured.' %}");
                                    isUpload = false;
                                }
                            } else if (d['job']['is_failed'] === true) {
                                box_alert("{% trans 'Service Unavailable.' %}");
                                isUpload = false;
                            } else {
                                window.setTimeout(function () {
                                    job_test(job_id);
                                }, 3000);
                            }
                        } else {
                            box_alert("{% trans 'Invalid Job.' %}");
                            isUpload = false;
                        }
                    }
                });
            }

            function ajax_upload(file_list, current_index) {
                isUpload = true;
                var file = file_list[current_index];
                var xhr = new XMLHttpRequest();
                xhr.timeout = 600000; // ms
                xhr.responseType = "json";
                xhr.open("POST", "", true);
                var body = new FormData();
                body.append("ajax", true);
                body.append("action", "upload");
                body.append("package", file);
                body.append("csrfmiddlewaretoken", '{{ csrf_token }}');
                var node = document.getElementById("file_id_" + current_index);
                xhr.upload.onloadstart = function (e) {
                    box_display("{% trans 'Uploading...' %}");
                    node.style.color = "#5BB0ED";
                    node.innerText = "[Uploading] " + file.name;
                };
                xhr.upload.onprogress = function (e) {
                    if (e.lengthComputable) {
                        box_display((e.loaded / e.total * 100).toFixed(2) + "%");
                    }
                };
                xhr.ontimeout = function (e) {
                    box_display("{% trans 'Transfer Timeout' %}");
                    node.style.color = "#C0392B";
                    node.innerText = "[Timeout] " + file.name;
                };
                xhr.onload = function (e) {
                    var single_file = (file_list.length === 1);
                    if (this.status === 200) {
                        if (this.response['status'] === true) {
                            if (this.response['job'] !== null) {
                                job_id = this.response['job']['id'];
                                node.style.color = "#27AE60";
                                if (job_id) {
                                    if (single_file) {
                                        window.setTimeout(function () {
                                            job_test(job_id);
                                        }, 3000);
                                    }
                                    node.innerText = "[Uploaded] " + file.name;
                                } else {
                                    if (single_file) {
                                        var version_id = this.response['job']['result']['version'];
                                        window.location.href = '../WEIPDCRM/version/' + version_id + '/change/';
                                    }
                                }
                            }
                            if (single_file) {
                                box_display(this.response['msg']);
                            }
                        } else {
                            if (single_file) {
                                box_alert(this.response['msg']);
                            }
                            node.style.color = "#C0392B";
                            node.innerText = "[Error] " + file.name;
                        }
                    } else {
                        if (single_file) {
                            box_alert("{% trans 'Service Unavailable: ' %}" + this.status);
                        }
                        node.style.color = "#C0392B";
                        node.innerText = "[Error] " + file.name;
                    }
                    if (current_index < file_list.length - 1) {
                        ajax_upload(file_list, current_index + 1);
                    } else if (!single_file) {
                        box_display("{% trans 'Operation Completed.' %}");
                        isUpload = false;
                    } else {
                        isUpload = false;
                    }
                };
                xhr.send(body);
            }

            function check_form(file_name) {
                if (file_name.indexOf('.deb') === -1 || file_name.indexOf('.deb') !== file_name.length - 4) {
                    box_alert("{% trans 'Only Debian Package (*.deb) is allowed.' %}");
                    return false;
                }
                return true;
            }

            $(document).on({
                dragleave: function (e) {
                    e.preventDefault();
                },
                drop: function (e) {
                    e.preventDefault();
                },
                dragenter: function (e) {
                    e.preventDefault();
                },
                dragover: function (e) {
                    e.preventDefault();
                }
            });
            box.addEventListener("click", function (e) {
                if (isUpload) {
                    return;
                }
                finput.click();
            }, false);
            box.addEventListener("dragenter", function (e) {
                e.preventDefault();
                if (isUpload) {
                    return;
                }
                box_display("{% trans 'Drop Here!' %}");
            }, false);
            box.addEventListener("dragleave", function (e) {
                e.preventDefault();
                if (isUpload) {
                    return;
                }
                box_display("{% trans 'Debian Package (*.deb)' %}");
            }, false);
            box.addEventListener("drop", function (e) {
                e.preventDefault();
                if (isUpload) {
                    return;
                }
                box_display("{% trans 'Debian Package (*.deb)' %}");
                var upload_list = [];
                var file_list = e.dataTransfer.files;
                // Check list
                for (var i = 0; i < file_list.length; i++) {
                    var file = file_list[i];
                    if (check_form(file.name)) {
                        upload_list.push(file);
                    }
                }
                if (upload_list.length === 0) {
                    return;
                } else if (upload_list.length > 500) {
                    box_alert("{% trans 'Too many files.' %}");
                    return;
                }
                // Display list
                var drop_list_dom = document.getElementById("drop-list");
                drop_list_dom.innerHTML = "";
                for (var j = 0; j < upload_list.length; j++) {
                    var node = document.createElement("li");
                    node.id = "file_id_" + j;
                    node.innerText = "[Ready] " + upload_list[j].name;
                    drop_list_dom.appendChild(node);
                }
                // Upload
                ajax_upload(upload_list, 0);
            }, false);
            finput.addEventListener("change", function (e) {
                e.preventDefault();
                if (isUpload) {
                    return;
                }
                if (!check_form(finput.value)) {
                    return false;
                }
                var uform = document.getElementById("upload_form");
                uform.submit();
            }, false);
            var msg = "{{ msg }}";
            var job_id = "{{ job_id }}";
            // Do redirect job test
            if (job_id.length > 0) {
                isUpload = true;
                window.setTimeout(function () {
                    job_test(job_id);
                }, 3000);
                if (msg.length > 0) {
                    box_display(msg);
                }
            } else {
                isUpload = false;
                if (msg.length > 0) {
                    box_alert(msg);
                }
            }
        })(django.jQuery);
    </script>
{% endblock %}